import * as echarts from 'echarts';
import styles from './index.less';
import Charts from './Charts';
import { useEffect, useRef, useState } from 'react';
import { getFaultAndOperateChart } from '@/services/api/home';
import moment from 'moment';
function getNumber(num: number) {
  return Number.isInteger(num) ? num : num.toFixed(2) || 0;
}
const style: React.CSSProperties = {
  height: '244px',
  background: '#fff',
  borderRadius: '14px',
  marginTop: '18px',
  position: 'relative',
  flex: '1',
};
const Map: React.FC = (props) => {
  const chartRef = useRef<echarts.ECharts>();
  const [option, setOption] = useState<any>(null);
  const getTableHeader = async (params: any) => {
    const res = await getFaultAndOperateChart(params);
    let { result, status } = res;
    setOption({
      // visualMap: [
      //   {
      //     show: false,
      //     type: 'continuous',
      //     seriesIndex: 0,
      //     dimension: 0,
      //     min: 0,
      //     inRange: {
      //       color: [
      //         'rgba(82, 204, 163, 0)',
      //         'rgba(130, 244, 205, 0.6)',
      //         'rgba(82, 204, 163, 0.8))',
      //       ],
      //     },
      //     max,
      //   },
      //   {
      //     show: false,
      //     type: 'continuous',
      //     seriesIndex: 1,
      //     dimension: 0,
      //     min: 0,
      //     inRange: {
      //       color: [
      //         'rgba(255, 204, 74, 0.3)',
      //         'rgba(250, 216, 128, 0.6)',
      //         'rgba(255, 204, 74, 0.8))',
      //       ],
      //     },
      //     max,
      //   },
      //   {
      //     show: false,
      //     type: 'continuous',
      //     seriesIndex: 2,
      //     dimension: 0,
      //     min: 0,
      //     inRange: {
      //       color: [
      //         'rgba(225,235,251, 0.3)',
      //         'rgba(102, 153, 255, 0.6)',
      //         'rgba(102, 153, 255, 0.8))',
      //       ],
      //     },
      //     max,
      //   },
      // ],
      title: {
        text: '油耗量/工作时长/作业面积',
        left: 20,
        top: 26,
        textStyle: {
          fontSize: 22,
        },
      },
      grid: {
        top: 92,
        bottom: 20,
        left: 42,
        right: 28,
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
        formatter: function (params: any) {
          var result = '';
          params.forEach(function (item: any) {
            result +=
              item.marker +
              item.seriesName +
              '：' +
              getNumber(item.data.value) +
              (item.seriesName == '工作时长(h)'
                ? ' h'
                : item.seriesName === '油耗量(L)'
                ? ' L'
                : ' 亩') +
              '<br/>';
          });
          return result;
        },
      },
      legend: {
        top: 66,
        right: 78,
        itemGap: 34,
      },
      xAxis: [
        {
          type: 'category',
          data: result.map((item: any) => ({ ...item, value: item.date.slice(5) })),
          axisTick: {
            alignWithLabel: true,
          },
          axisPointer: {
            type: 'none',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '(亩)',
          axisLabel: {
            formatter: '{value}',
          },
          splitNumber: 5,
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: 'value',
          name: '(h)(L)',
          axisLabel: {
            formatter: '{value}',
          },
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        // {
        //   type: 'value',
        //   name: '(L)',
        //   axisLabel: {
        //     formatter: '{value}',
        //   },
        //   splitLine: {
        //     show: true,
        //   },
        //   axisLine: {
        //     show: false,
        //   },
        //   axisTick: {
        //     show: false,
        //   },
        // },
      ],
      series: [
        {
          type: 'line',
          smooth: 0.6,
          lineStyle: {
            width: 3,
            shadowBlur: 14,
            shadowOffsetX: 3,
            shadowOffsetY: 6,
            shadowColor: 'rgba(26, 117, 234, 0.15)',
            color: '#FFCC4A',
          },
          symbol: 'circle',
          symbolSize: 10,
          showSymbol: false,
          name: '油耗量(L)',
          yAxisIndex: 1,
          itemStyle: {
            color: '#FFCC4A',
          },
          data: result.map((item: any) => ({ ...item, value: item.totalOil })),
        },
        {
          name: '工作时长(h)',
          type: 'line',
          smooth: 0.6,
          showSymbol: false,
          lineStyle: {
            width: 3,
            shadowBlur: 14,
            shadowOffsetX: 3,
            shadowOffsetY: 6,
            shadowColor: 'rgba(26, 117, 234, 0.15)',
            color: '#3fd9a3',
          },
          symbol: 'circle',
          symbolSize: 10,
          yAxisIndex: 1,
          itemStyle: {
            color: '#3fd9a3',
          },
          data: result.map((item: any) => ({ ...item, value: item.totalTime })),
        },
        {
          name: '作业面积(亩)',
          type: 'line',
          smooth: 0.6,
          showSymbol: false,
          lineStyle: {
            width: 3,
            shadowBlur: 14,
            shadowOffsetX: 3,
            shadowOffsetY: 6,
            shadowColor: 'rgba(26, 117, 234, 0.15)',
            color: '#6699ff',
          },
          itemStyle: {
            color: '#6699ff',
          },
          symbol: 'circle',
          symbolSize: 10,
          yAxisIndex: 0,
          data: result.map((item: any) => ({ ...item, value: item.totalArea })),
        },
      ],
    });
  };
  useEffect(() => {
    handleClick(0);
  }, []);
  const handleClick = (num: number) => {
    let start = moment()
      .subtract(num + 30, 'days')
      .format('YYYY-MM-DD');
    let end = moment().subtract(num, 'days').format('YYYY-MM-DD');
    getTableHeader({ startDate: start, endDate: end + ' 23:59:59' });
  };
  // const [day, setDay] = useState(7);
  return (
    <div style={style} id="area">
      {/* <div className={styles.chartButton}>
        <Button size={'small'}>自定义</Button>
        <Radio.Group
          size={'small'}
          value={day}
          onChange={(e) => {
            setDay(e.target.value);
            handleClick(e.target.value);
          }}
        >
          <Radio.Button value={30}>前30天</Radio.Button>
          <Radio.Button value={7}>前7天</Radio.Button>
          <Radio.Button value={1}>今天</Radio.Button>
        </Radio.Group>
      </div> */}
      <div className={styles.areaCharts}>
        <Charts option={option} actionRef={chartRef} id={'area'} />
      </div>
    </div>
  );
};
export default Map;
